<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="直播类型">
              <j-dict-select-tag placeholder="请选择直播类型" v-model="queryParam.roomType" dictCode="live_type"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="房间号">
              <a-input placeholder="请输入房间号" v-model="queryParam.roomId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="男用户ID">
              <a-input placeholder="请输入男用户ID" v-model="queryParam.manUserId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="女用户ID">
              <a-input placeholder="请输入女用户ID" v-model="queryParam.womanId"></a-input>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="男用户昵称">
                <a-input placeholder="请输入男用户昵称" v-model="queryParam.manName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="女用户昵称">
                <a-input placeholder="请输入女用户昵称" v-model="queryParam.womanName"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
            </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <a-tabs default-active-key="1" @change="tabChange">
      <a-tab-pane key="1" tab="异常通话">
      </a-tab-pane>
      <a-tab-pane key="2" tab="全部通话">
      </a-tab-pane>
    </a-tabs>


    <!-- table区域-begin -->
    <div>
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>-->

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="timeSlot" slot-scope="text">
          <span v-if="!text">{{text}}</span>
          <span v-else>{{timestampToDate(text)}}</span>
        </template>
        <template slot="fileSlot" slot-scope="text,record">
          <span v-if="!text">{{text}}</span>
          <span style="position: relative;margin-left: 5px" v-for="item in text.split(',')" @click="openVideo(item)" v-else >
            <img :src="item+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0'" :style="{width: '30px',height: '50px'}">
            <img style="width: 25px;height: 25px;position:absolute;z-index: 1;top:50%;left: 50%;transform: translate(-50%, -50%)" src="~@/assets/play.png">
          </span>
<!--          <span style="position: relative;margin-left: 5px" v-for="item in text.split(',')" @click="openVideo(item)" v-if="record.roomType=='10'" >
            <audio ref="audioPlayer" :src="item" controls></audio>
          </span>-->
        </template>
        <template slot="statusSlot" slot-scope="text, record">
          <div v-if="record.status === '1'" style="color: green">{{text}}</div>
          <div v-else style="color: red">{{text}}</div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="openBanaccountModal(record)">封号</a>
          <a-divider type="vertical" v-if="record.errorStatus=='1'"/>
          <a @click="openAuditRoom(record)" v-if="record.errorStatus=='1'">违规记录</a>
          <a-divider type="vertical" v-if="record.status=='1'"/>
          <a @click="openWarn(record.id)" v-if="record.status=='1'">警告</a>
          <a-divider type="vertical" v-if="record.status=='1'"/>
          <a-popconfirm v-if="record.status=='1'" title="确定挂断吗?" @confirm="() => closeOff(record.id)">
            <a>挂断</a>
          </a-popconfirm>
          <a-divider type="vertical"/>
          <a @click="rtmpPlay(record.liveUrl)">播放实时视频</a>
<!--          <a-divider type="vertical" />
          <a @click="">录制文件</a>-->
<!--          <a @click="">警告</a>
          <a-divider type="vertical" />
          <a @click="">挂断</a>
          <a-divider type="vertical" />-->

        </span>
      </a-table>
    </div>

    <!-- 视频播放器 -->
    <a-modal v-model="videoVisible" :width="800" @cancel="videoClose" :footer="null" destroyOnClose="true">
      <div style="margin-top: 20px;height: 1000px">
        <vue-core-video-player
          :loop="false"
          autoplay="false"
          style="width: 100%;height: 100%"
          :src="videoUrl"
        ></vue-core-video-player>
      </div>
    </a-modal>

    <!-- 警告 -->
    <a-modal v-model="warnVisible" :confirmLoading="warnLoading" :width="800" title="警告" @cancel="warnClose" @ok="warnSubmit" destroyOnClose="true">
      <div>
        <a-textarea placeholder="请输入警告内容" v-model="warnContent"></a-textarea>
      </div>
    </a-modal>

    <Banaccount-Modal ref="BanaccountModal"></Banaccount-Modal>
    <Room-Audit-List ref="RoomAuditList"></Room-Audit-List>
    <Video-Play-Form ref="VideoPlayForm"></Video-Play-Form>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BanaccountModal from '@/views/xiny/security/banaccount/modules/BanaccountModal'
  import RoomAuditList from '../roomaudit/RoomAuditList'
  import { postAction,getAction } from '@/api/manage'
  import VueCoreVideoPlayer from 'vue-core-video-player'
  import VideoPlayForm from './modules/VideoPlayForm'

  export default {
    name: 'VideoInfoList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      BanaccountModal,
      RoomAuditList,
      VideoPlayForm
    },
    data () {
      return {
        description: '视频语音通话记录管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'房间号',
            align:"center",
            dataIndex: 'roomId'
          },
          {
            title:'男用户ID',
            align:"center",
            dataIndex: 'manUserId'
          },
          {
            title:'男用户昵称',
            align:"center",
            dataIndex: 'manName'
          },
          {
            title:'女用户ID',
            align:"center",
            dataIndex: 'womanId'
          },
          {
            title:'女用户名称',
            align:"center",
            dataIndex: 'womanName'
          },
          {
            title:'直播类型',
            align:"center",
            dataIndex: 'roomType_dictText'
          },
          {
            title:'录制文件',
            align:"center",
            dataIndex: 'fileUrl',
            scopedSlots: { customRender: 'fileSlot' }
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status_dictText',
            width: 100,
            scopedSlots: { customRender: 'statusSlot' }
          },
          {
            title:'通话开始时间',
            align:"center",
            dataIndex: 'beginTime',
            width: 200,
            scopedSlots: { customRender: 'timeSlot'},
          },
          {
            title:'通话结束时间',
            align:"center",
            dataIndex: 'endTime',
            width: 200,
            scopedSlots: { customRender: 'timeSlot'},
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/message/videoInfo/list",
          delete: "/message/videoInfo/delete",
          deleteBatch: "/message/videoInfo/deleteBatch",
          exportXlsUrl: "/message/videoInfo/exportXls",
          importExcelUrl: "message/videoInfo/importExcel",

        },
        dictOptions:{},
        superFieldList:[],
        disableMixinCreated:true,

        videoVisible:false,
        videoUrl:"",

        rtmpVisible:false,

        warnLoading:false,
        warnVisible:false,
        videoId:false,
        warnContent:"",
      }
    },
    created() {
      this.queryParam.errorStatus='1';
      this.loadData(1);
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      //关闭实时播放器
      rtmpClose(){
        this.videoUrl = "";
        this.rtmpVisible = false;
      },

      rtmpPlay(url){
        this.$refs.VideoPlayForm.visible=true;
        this.$refs.VideoPlayForm.openVideo(url);
      },

      //关闭播放器
      videoClose(){
        this.videoUrl = "";
        this.videoVisible = false;
      },
      //打开
      openVideo(url){
        this.videoUrl = url;
        this.videoVisible = true;
      },

      //封号
      openBanaccountModal(record){
        var obj={};
        obj.roomMsgId = record.roomId;
        obj.manUserId = record.manUserId;
        obj.manName = record.manName;
        obj.womanName = record.womanName;
        obj.womanId = record.womanId;
        obj.whatType="1";//1语音视频通话类型
        obj.type="1";//1代表封号类型


        this.$refs.BanaccountModal.edit(obj);
        this.$refs.BanaccountModal.title = "封号";
        this.$refs.BanaccountModal.disableSubmit = false;
      },
      //打开审核内容
      openAuditRoom(record){
        this.$refs.RoomAuditList.show(record.roomId);
      },

      //tab切换
      tabChange(val){
        if(val=='1'){
          this.queryParam.errorStatus=val;
          this.loadData(1);
        }else{
          this.queryParam.errorStatus='';
          this.loadData(1);
        }
      },

      //重置
      searchReset() {
        var errorStatus=this.queryParam.errorStatus;
        this.queryParam = {errorStatus:errorStatus},
          this.loadData(1);
      },

      //打开警告框
      openWarn(id){
        this.videoId = id;
        this.warnVisible = true;
      },

      //关闭警告
      warnClose(){
        this.videoId = "";
        this.warnContent="";
        this.warnVisible = false;
      },

      //提交警告内容
      warnSubmit(){
        if(!this.warnContent){
          this.$message.error("请输入警告内容");
          return;
        }
        this.warnLoading=true;
        getAction("/message/videoInfo/warnInfo", {videoId:this.videoId, content:this.warnContent}).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.warnClose();
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.warnLoading = false;
        })
      },

      //提交警告内容
      closeOff(id){
        this.loading=true;
        getAction("/message/videoInfo/closeOff", {videoId:id}).then(res => {
          if (res.success) {
            this.loadData();
            this.$message.success(res.message);
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false;
        })
      },

      //格式化时间戳
      timestampToDate(timestamp, fmt = 'yyyy-MM-dd HH:mm:ss') {
        const date = new Date(timestamp); // JavaScript 的 Date 对象需要传入的是毫秒数，所以如果是秒级时间戳需要乘以1000
        const o = {
          'M+': date.getMonth() + 1, // 月份
          'd+': date.getDate(), // 日
          'H+': date.getHours(), // 小时
          'm+': date.getMinutes(), // 分
          's+': date.getSeconds(), // 秒
          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
          'S': date.getMilliseconds(), // 毫秒
        };

        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }

        for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
          }
        }

        return fmt;
      }
    },

  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>